<!-- 装修用户组件：用户卡片 -->
<template>
  <view
    class="ss-user-info-wrap ss-p-t-50"
    :style="[bgStyle, { marginLeft: `${data.space}px` }]"
  >
    <view class="content-wrapper">
      <view class="left-box ss-flex ss-col-start ss-m-l-36">
        <view class="user-info">
          <view class="phone-number">15136603309</view>
          <view class="info-title">完善个人信息</view>
          <view class="points-section">
            <view class="points-number">50</view>
            <view class="points-label">积分</view>
          </view>
          <view class="user-type">注册用户</view>
          <view class="reward-text">满1000积分获得99盲盒花束</view>
        </view>
      </view>
      <view class="right-box">
        <button class="ss-reset-button" @tap="showShareModal">
          <image src="/static/flower.png" class="qr-icon"></image>
        </button>
      </view>
    </view>

    <!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
    <!-- <view
      class="bind-mobile-box ss-flex ss-row-between ss-col-center"
      v-if="isLogin && !userInfo.mobile"
    >
      <view class="ss-flex">
        <text class="cicon-mobile-o" />
        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全</view>
      </view>
      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
    </view> -->
  </view>
</template>

<script setup>
/**
 * 用户卡片
 *
 * @property {Number} leftSpace                  - 容器左间距
 * @property {Number} rightSpace                  - 容器右间距
 *
 * @property {String} avatar          - 头像
 * @property {String} nickname          - 昵称
 * @property {String} vip              - 等级
 * @property {String} collectNum        - 收藏数
 * @property {String} likeNum          - 点赞数
 *
 *
 */
import { computed } from "vue";
import sheep from "@/sheep";
import { showShareModal, showAuthModal } from "@/sheep/hooks/useModal";

// 用户信息
const userInfo = computed(() => sheep.$store("user").userInfo);

// 是否登录
const isLogin = computed(() => sheep.$store("user").isLogin);
// 接收参数
const props = defineProps({
  // 装修数据
  data: {
    type: Object,
    default: () => ({}),
  },
  // 装修样式
  styles: {
    type: Object,
    default: () => ({}),
  },
  // 头像
  avatar: {
    type: String,
    default: "",
  },
  nickname: {
    type: String,
    default: "请先登录",
  },
  vip: {
    type: [String, Number],
    default: "1",
  },
  collectNum: {
    type: [String, Number],
    default: "1",
  },
  likeNum: {
    type: [String, Number],
    default: "1",
  },
});

// 设置背景样式
const bgStyle = computed(() => {
  // 直接从 props.styles 解构
  const { bgType, bgImg, bgColor } = props.styles;

  // 根据 bgType 返回相应的样式
  return {
    background:
      bgType === "img" ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,
  };
});

// 绑定手机号
function onBind() {
  showAuthModal("changeMobile");
}
</script>

<style lang="scss" scoped>
.ss-user-info-wrap {
  box-sizing: border-box;
  background-image: url(http://49.233.144.92:7791/i/2025/10/26/68fe344294368.png);
  background-size: 100%;
  background-repeat: no-repeat;
  height: 28vh;
  margin: 20rpx;
  color: #ffffff;

  .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
  }

  .user-info {
    display: flex;
    flex-direction: column;
    color: #ffffff;
  }

  .phone-number {
    font-size: 28rpx;
	margin-bottom: 16rpx;
    font-weight: 500;
    color: #ffffff;
  }

  .info-title {
    font-size: 18rpx;
    margin-bottom: 50rpx;
    color: #ffffff;
    opacity: 0.9;
  }

  .points-section {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
  }

  .points-number {
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    margin-right: 8rpx;
  }

  .points-label {
    font-size: 20rpx;
    color: #ffffff;
    opacity: 0.9;
  }

  .user-type {
    font-size: 22rpx;
	margin-top: 50rpx;
    margin-bottom: 16rpx;
    color: #ffffff;
    opacity: 0.85;
  }

  .reward-text {
    font-size: 16rpx;
    color: #ffffff;
    opacity: 0.8;
    line-height: 1.4;
  }

  .vip-img {
    width: 30rpx;
    height: 30rpx;
  }

  .qr-icon {
    width: 120rpx;
    height: 120rpx;
  }

  .right-box {
    display: flex;
    align-items: flex-start;
    margin-right: 52rpx;
    flex-shrink: 0;
  }
}

.bind-mobile-box {
  width: 100%;
  height: 84rpx;
  padding: 0 34rpx 0 44rpx;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);

  .cicon-mobile-o {
    font-size: 30rpx;
    color: #ff690d;
  }

  .mobile-title {
    font-size: 24rpx;
    font-weight: 500;
    color: #ff690d;
  }

  .bind-btn {
    width: 100rpx;
    height: 50rpx;
    background: #ff6100;
    border-radius: 25rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>
